@charset "utf-8";
*{
  margin:0;
  padding:0;
}
#login_gray{
  width:100%;
  height:40px;
  margin:0 auto;
  background-color:#333;
  >.inner{
    width:1226px;
    // overflow:hidden;
    margin:0 auto;
    >.left{
      float:left;
      position:relative;
      >ul{
        >li{
          list-style:none;
          float:left;
          
          >a{
            color:#b0b0b0;
            text-decoration:none;
            cursor: pointer;
            line-height:40px;
            font-size:12px;
          }
          >a:hover{
            color:white;
          }

        }
        
    
        span{
          margin:0.3em;
          color:#424242;
          line-height:40px;
        }
      }
      >.downloadAppimg{
        width:120px;
        height:120px;
        background-color: white;
        position:absolute;
        top:40px;
        left:570px;
        box-shadow:0px 0px 5px 5px rgba(0, 0, 0, 0.178);
        display:none;
        z-index:200;
        >img{
          display:block;
          width:90px;
          height:90px;
          margin:15px;
        }
      }
    }
    >.right{
      float:right;
      >ul{
        float:left;
        margin:0;
        overflow:hidden;
        >li{
          list-style:none;
          float:left;
          line-height:40px;
          >a{
            color:#b0b0b0;
            text-decoration:none;
            cursor: pointer;
          }
          >a:hover{
            color:white;
          }
          span{
            margin:0.3em;
            color:#424242;
            line-height:40px;
          }

        }
      }
      >.shopTrolley{
        float:left;
        width:120px;
        height:40px;
        background:#424242;
        text-align:center;
        margin-left:20px;
        cursor: pointer;
        >a{
          color:#b0b0b0;
          text-decoration:none;
          line-height:40px;

          >i{
            margin-right:3px;
          }
        }
      }
      >.shopTrolley:hover{
        background-color:white;
        >a{
          color:#ff6700;
        }
        >i{
          color:#ff6700;
        }
      }
    }
  }
}

#nav{
  width:100%;
  height:100px;
  >.inner{
    width:1226px;
    margin:0 auto;
    overflow:hidden;

    >.left{
      float:left;
      width:56px;
      padding:22px 0;
      margin-right:178px;
      >a{
        width: 56px;
        height:56px;
        img{
          width:56px;
        }
      }
    }

    >.middle{
      float:left;
      width:650px;

      >ul{
        overflow:hidden;
        >li{
          list-style:none;
          float:left;


          >a{
            padding:0 10px;
            font-size:16px;
            color:rgb(51,51,51);
            line-height:100px;
            text-decoration: none;
            transition:0.3s;
          }
          >a:hover{
            color:#ff6700;
          }
        }
      }
    }

    >.right{
      float:right;
      width:297px;
      padding:25px 0;
      display:flex;

      >.searchInput{
        width:243px;
        height:48px;
        border:1px solid rgb(224,224,224);
      }
      >.search{
        width: 48px;
        height: 48px;
        border:1px solid rgb(224,224,224);
        border-left:none;
        text-align:center;
        cursor: pointer;
        >i{
          line-height:48px;
          font-size:20px;
          color:rgb(97,97,97);
        }
      }
      >.search:hover{
        background:#ff6700;
        >i{
          color:white;
        }
      }
    }
  }
}

#nav_down{
  width:100%;
  height:200px;
  // background-color:gray;
  position:absolute;
  display:none;
  z-index:100;
  >.inner{
    width:1226px;
    margin:auto;
    height:100%;
    // position:absolute;
    // background-color:white;
    >div{
      height:200px;
      background-color:white;
      display:none;
      
    }

  }
  >.show{
    display:none;
    width:1226px;
    height:200px;
    position:absolute;
    border-top:1px solid #b0b0b0;
    background:white;
    top:0;
    left:130.667px;
    box-shadow:0px 5px 3px 3px #b0b0b03a;

  }
}

#staytop{
  height:60px;
  width:100%;
  box-shadow:0px 7px 10px -6px gray;
  position:sticky;
  top:0;
  left:0;
  background-color:white;
  border-top:1px solid gray;
  #inner{
    width:1226px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
    .left{
      font-size:20px;
      line-height:60px;
    }
    .right{
      ul{
        display:flex;
        justify-content: space-between;
        line-height:60px;
        font-size:14px;
        li{
          list-style:none;
          a{
            text-decoration: none;
            color:#333;
          }
        }
        span{
          color:#888
        }
      }
    }
  }
}

// token
#token{
  height:48px;
  width:100%;
  background-color:rgb(247,247,247);
  >#inner{
    width:1226px;
    margin:0 auto;
    text-align:center;
    line-height:48px;
    font-size:14px;
    a{
      text-decoration:none;
      color:#ff5c00;
      margin:0 10px;
    }
    i{
      font-style:normal;
      cursor: pointer;
    }
  }
}

// body
#body{
  // background-color:#f5f5f5;
  // padding-top:25px;
  // padding-bottom:25px;

  #suspension{
    width:80px;
    position:fixed;
    right:0;
    bottom:80px;
    >ul{
      >li{
        width:100%;
        height:80px;
        list-style:none;
        border:1px solid lightgray;
        background-color:white;
        border-bottom:none;
        text-align:center;
        padding-top:10px;
        box-sizing:border-box;
        color:gray;
        >i{
          line-height:40px;
          font-style:normal;
          font-size:30px;
        }
        >span{
          display:block;
        }
      }
      >li:nth-child(5){
        border-bottom:solid 1px lightgray;
      }
      >li.backTop{
        cursor: pointer;
        display:none;
        margin-top:10px;
        border-bottom:solid 1px lightgray;
        >i{
          display:block;
          transform:rotate(-90deg) translate(0,-5px) scale(1,2);
        }
      }
    }
  }

  #shortInfo{
    width:100%;
    height:814px;
    padding:32px 0px 12px;
    >#inner{
      width:1226px;
      margin:0 auto;
      display:flex;
      justify-content: space-between;
      >.left{
        width:606px;
        img{
          width:560px;
          height:560px;
        }
      }
      >.right{
        width:600px;
        margin-left:20px;
        .top{
          .title{
            height:36px;
            line-height:36px;
            font-size:24px;
            font-weight:normal;
            color:rgb(33,33,33);
          }
          .shortDes{
            color:rgb(176,176,176);
            font-size:14px;
            height:20px;
            margin-top:8px;
            line-height:1.5;
          }
          >span{
            display:block;
            height:20px;
            margin-top:14px;
            color:rgb(255,103,0);
          }
          >.price{
            height:18px;
            padding:12px 0px 10px;
            line-height: 18px;
            span:nth-of-type(1){
              color:#ff6700;
              font-size:18px;
            }
            span:nth-of-type(2){
              font-size:14px;
              text-decoration:line-through;
              color:#b0b0b0;
            }
          }
        }
        .giftware{
          width:100%;
          height:50px;
          padding-top:24px;
          border-top:1px solid rgb(224,224,224);
          border-bottom:1px solid rgb(224,224,224);
          >span:nth-of-type(1){
            display:inline-block;
            width:80px;
            height:20px;
            padding:2px 0;
            background-color:rgb(255,103,0);
            text-align:center;
            color:white;
            font-size:14px;
            line-height:20px;
          }
          >span:nth-of-type(2){
            height:26px;
            line-height:26px;
            font-size:14px;
            margin-left:10px;
            color:#333;
          }
        }
        .address{
          height:41px;
          width:100%;
          padding:30px;
          border:1px solid rgb(224,224,224);
          margin:20px 0;
          font-size:14px;
          line-height:20px;
          background-color:rgb(250,250,250);
          >span:nth-of-type(1){
            color:rgb(51,51,51);
          }
          >a{
            margin-left:10px;
            color:#ff5c00;
            text-decoration:none;
          }
          >span:nth-of-type(2){
            display:block;
            color:#ff5c00;
            margin-left:21px;
          }
        }
        .color{
          font-size:18px;
          .black{
            margin:10px 0px 0px 0px;
            width:282px;
            height:42px;
            padding:0px 5px;
            border:1px solid #ff5c00;
            text-align:center;
            line-height:42px;
            color: #ff5c00;
            font-size:16px;
          }
        }
        .allMoney{
          margin:30px 0;
          width:540px;
          height:86px;
          background-color:rgb(250,250,250);
          padding:30px;
          .top{
            height:30px;
            font-size:14px;
            line-height:30px;
            display:flex;
            color:#616161;
            justify-content: space-between;
            >.top_right{
              span:nth-last-child(1){
                text-decoration:line-through;
              }
            }
          }
          .bottom{
            height:36px;
            line-height:36px;
            padding-top:20px;
            color:#ff5c00;
            font-size:24px;
          }
        }
        .add{
          overflow:hidden;
          color:white;
          >span{
            width:300px;
            height:54px;
            display:block;
            float:left;
            background-color:#ff6700;
            text-align:center;
            line-height:54px;
            cursor: pointer;
            transition:0.5s;
          }
          >span:hover{
            background-color:#f25807;
          }
          >div{
            margin-left:10px;
            float:left;
            height:54px;
            width:140px;
            line-height:54px;
            text-align:center;
            background-color:rgb(176,176,176);
            cursor: pointer;
            transition:0.5s;
          }
          >div:hover{
            background-color:#757575;
          }
        }
        .advantage{
          height:82.75px;
          color:#b0b0b0;
          font-size:14px;
          margin-top:20px;
          display:flex;
          flex-wrap: wrap;
          >li{
            height:30px;
            line-height:30px;
            list-style:none;
            flex-shrink: 0;
            margin-right:20px;
            >i{
              display:inline-block;
              font-size:18px;
              font-weight:bold;
              transform: translateY(1px);
            }
          }
        }
      }
    }
  }

  #introduction{
    background-color:#f5f5f5;
    width:100%;
    padding-bottom:50px;
    #inner{
      width:1226px;
      margin:0 auto;
      img{
        display:block;
        width:100%;
      }
      div{
        height:32.7px;
        line-height:32.7px;
        padding:22px 0;
        font-size:22px;
      }
    }
  }
}

#footer{
  #footerTop{
    height:333px;
    width:1226px;
    margin:auto;
    >#services{
      height:80px;
      box-sizing: border-box;
      padding:27px;
      border-bottom:1px solid lightgray;
      display:flex;
      justify-content: space-around;
      >div{
        >.iconfont{
          font-weight: bold;
        }
        >i{
          font-style: normal;
          font-size:20px;
          color:rgb(102, 101, 101);
        }
      }
      >div:not(div:nth-child(5)){
        padding-right:50px;
        border-right:1px solid lightgray;
      }
    }
    >#footerNav{
      >.left{
        padding-top:30px;
        float:left;
        >ul{
          float:left;
          margin-right:100px;
          >li{
            margin-top:10px;
            list-style:none;
            font-size:12px;
            color:gray;
          }
          >li:hover{
            color:#ff6700;
          }
          >li:nth-child(1){
            margin-top:20px;
          }
        }
      }
      >.right{
        float:right;
        text-align:center;
        margin-top:30px;
        border-left:1px solid lightgray;
        padding-left:50px;
        >.tel{
          font-size:22px;
          color:#ff6700;
        }
        >.time{
          font-size: 12px;
          color:gray;
          margin:5px 0;
        }
        >.humanservice{
          border:1px solid #ff6700;
          height:40px;
          width:150px;
          text-align:center;
          line-height:40px;
          color:#ff6700;
        }
        >.follow{
          color:gray;
          >.iconfont:hover{
            cursor: pointer;
            color:#ff6700;
          }
          >.icon-weixin{
            >.img{
              width:100px;
              height:100px;
              box-sizing: border-box;
              background: white;
              display:none;
              box-shadow: 0px 0px 3px 3px lightgray;
              img{
                width:100%;

              }
            }
          }
          >.icon-weixin:hover{
            .img{
              display:block;
              transform:translateX(50px);
            }
          }
        }
      }
    }
  }
  >#footerBottom{
    height:205.33px;
    width:100%;
    padding:30px 0;
    background-color: #fafafa;
    >#footerDescription{
      width:1226px;
      margin:auto;
      >.left{
        width:56px;
        height:56px;
        background:url("../imgs/107.png");
        background-size:cover;
        margin-right:10px;
        float:left;
      }
      >.right{
        float:left;
        >ul{
          display:flex;
          width:1110px;
          justify-content: space-between;
          >li{
            list-style:none;
            color:#b0b0b0;
            font-size:14px;
          }
          >li:hover{
            color:#ff6700;
            cursor: pointer;
          }
          >span{
            color:#b0b0b0;
            font-size:14px;
          }
        }
        >ul:nth-child(2){
          width:430px;
        }
        >p{
          font-size:12px;
          color:#b0b0b0;
          >span:hover{
            color:#ff6700;
            cursor: pointer;
          }
          >i{
            font-style: normal;
          }
        }
        >div{
          margin-top:10px;
          >img{
            width:80px;
          }
          >.imgturn{
            display:inline-block;
            width:80px;
            height:30px;
            animation:imgturn 2s infinite steps(1) alternate;
          }
        }
      }
      >.bottom{
        float:left;
        width:1226px;
        margin:auto;
        height:30px;
        margin-top:50px;
        background:url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/slogan2020.png) no-repeat center 0;
      }
    }
  }
  @keyframes imgturn{
    0%{
      background:url("../imgs/112.png");
      background-size:cover;
    }
    50%{
      background:url("../imgs/113.png");
      background-size:cover;
    }
    100%{
      background:url("../imgs/112.png");
      background-size:cover;
    }
  }
}